<template>
    <transition name="dialog-fade">
        <!-- 对话框的遮罩   self是代表只有点击自己才触发  -->
        <div class="jul-dialog__warpper" v-show="visible" @click.self="handleClose">
            <div class="jul-dialog" :style="{ width, marginTop: top }">
                <div class="jul-dialog__header">
                    <slot name="title">
                        <span class="jul-dialog__title">{{title}}</span>
                    </slot>
                    <button class="jul-dialog__headerbtn" @click="handleClose">
                        <i class="jul-icon-close"></i>
                    </button>
                </div>
                <div class="jul-dialog__body">
                    <!-- 默认插槽 -->
                    <slot></slot>
                </div>
                <div class="jul-dialog__footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'julDialog',
    props: {
        title: {
            type: String,
            default: '提示'
        },
        width: {
            type: String,
            default: '50%'
        },
        top: {
            type: String,
            default: '15vh'
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    created() {
        console.log(this.$slots)
    },
    methods: {
        handleClose() {
            // console.log(132)
            // this.$emit('close', false)
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style lang="scss">
    // 遮罩层
    .jul-dialog__warpper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, .5);
        // 主体层
        .jul-dialog {
            position: relative;
            margin: 15vh auto 50px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            width: 30%;
            // 顶部提示区域
            &__header{
                padding: 20px 20px 10px;
                .jul-dialog__title{
                    line-height: 24px;
                    font-style: 18px;
                    color: #333;
                }
                .jul-dialog__headerbtn {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    padding: 0;
                    background: transparent;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    font-style: 16px;
                    .jul-icon-close{
                        color: #909399;
                    }
                }
            }

            // 内容区域
            &__body {
                padding: 30px 20px;
                color: #333;
                font-style: 14px;
                // 允许在单词内换行
                word-break: break-all;
            }

            &__footer{
                padding: 10px 20px 20px;
                text-align: right;
                box-sizing: border-box;
                .jul-button:first-child {
                    margin-right: 20px;
                }
            }
        }
    }

    // 显示隐藏的过渡效果
    .dialog-fade-enter-active {
        animation: fade .3s;
    }
    .dialog-fade-leave-active {
        animation: fade .3s reverse;
    }
    @keyframes fade {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }
</style>
